<template>
	<!-- 优惠券页面 -->
	<view class="coupon_container">
		<!-- Tab栏切换 -->
		<view class="tab_switch">
			<view class="haved_coupon tab_item" 
				@click="switchTab(0)"
				:class="{'active_tab': tabFlag == 0}"
				>
				已领取
			</view>
			<view class="used_coupon tab_item" 
				@click="switchTab(1)"
				:class="{'active_tab': tabFlag == 1}"
				>
				已使用
			</view>
		</view>
		<!-- 空优惠券提示 -->
		<view class="empty_tip" v-if="emptyCoupon">
			没有任何优惠券哦~
		</view>
		<!-- 优惠券列表 -->
		<view class="coupon_list" v-show="tabFlag == 0">
			<view class="coupon_item" 
				v-for="(item, index) of couponD" 
				:key="index"
				:class="{'notFirstCouponItem': index != 0}"
				>
				<view class="coupon_item_value_limit">
					<view class="coupon_item_value">
						￥<span style="font-weight: 600;">{{ item.value }}</span>
					</view>
					<view class="coupon_item_limit" v-if="item.limit != 0">
						满{{item.limit}}可用
					</view>
					<view class="coupon_item_limit" v-if="item.limit == 0">
						无门槛
					</view>
				</view>
				<view class="coupon_item_info">
					<view class="coupon_item_info_title">
						店铺优惠券
					</view>
					<view class="coupon_item_info_expire_use">
						<view class="coupon_item_info_expire">
							到期：{{ item.expireTime }}
						</view>
						<view class="coupon_item_info_use_btn">
							<button
								type="default" 
								class="coupon_item_info_use_btn_B"
								@click="gotoStore(item)"
								>
								使用
							</button>
						</view>
					</view>
					<view class="coupon_item_info_tip">
						该券仅限制在店铺内可用
					</view>
				</view>
			</view>
		</view>
		<!-- 已使用的优惠券 -->
		<view class="used_coupons" v-show="tabFlag == 1">
			<view class="coupon_item coupon_item_used"
				v-for="(item, index) of usedCouponD" 
				:key="index"
				:class="{'notFirstCouponItem': index != 0}"
				>
				<view class="coupon_item_value_limit">
					<view class="coupon_item_value coupon_item_value_used">
						￥<span style="font-weight: 600;">{{ item.value }}</span>
					</view>
					<view class="coupon_item_limit" v-if="item.limit != 0">
						满{{item.limit}}可用
					</view>
					<view class="coupon_item_limit" v-if="item.limit == 0">
						无门槛
					</view>
				</view>
				<view class=" coupon_item_info_use">
					<view class="coupon_item_info_title">
						店铺优惠券
					</view>
					<view class="coupon_item_info_expire_use">
						<view class="coupon_item_info_expire">
							使用时间：{{ item.useTime }}
						</view>
						<view class="coupon_item_info_use_btn">
							<button
								type="default" 
								class="coupon_item_info_use_btn_B coupon_item_info_use_btn_B_use"
								>
								已使用
							</button>
						</view>
					</view>
					<view class="coupon_item_info_tip">
						该券仅限制在店铺内可用
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import dayJs from "dayjs";

// 优惠券列表数据
let couponD = ref([]);
// 空优惠券标识
let emptyCoupon = ref(false);
// Tab栏标识
let tabFlag = ref(0);

// 已使用优惠券数据
let usedCouponD = ref([]);

onMounted(()=>{
	getUserCoupons();
	getUsedCoupons();
})

// 获取用户所有优惠券信息列表
async function getUserCoupons(){
	// 获取登录用户信息
	let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
	let res = await uni.$http.get(`/couponInfos/getCouponInfosByUserId/${userInfo.userId}`);
	if(res.data.code == 0){
		emptyCoupon.value = true; // 标识为空优惠券
		return 1;
	}
	
	// 格式化时间
	for(let item of res.data.data){
		item["expireTime"] = dayJs(item.expireTime).format("YYYY-MM-DD");
	}
	
	couponD.value = res.data.data;
}

// 获取已使用优惠券数据
async function getUsedCoupons(){
	let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
	const res = await uni.$http.get(`/couponInfos/getUseCouponRecordByUserId/${userInfo.userId}`);
	
	// 处理使用时间
	// 格式化时间
	for(let item of res.data.data){
		item["useTime"] = dayJs(item.useTime).format("YYYY-MM-DD");
	}
	
	usedCouponD.value = res.data.data;
}

// 切换tab栏
function switchTab(flag){
	tabFlag.value = flag;
}

// 跳转到店铺页
function gotoStore(item){
	uni.navigateTo({
		url: `/subPkg1/store/store?storeId=${item.bindStore}`
	})
}

</script>

<style lang="scss" scoped>
.empty_tip{
	font-size: 14px;
	color: #444444;
	margin-top: 25rpx;
	text-align: center;
}


.coupon_item{
	display: flex;
	border: solid #ff989a 1px;
	border-radius: 15rpx;
	background-color: #fff;
	padding: 15rpx;
	width: 90%;
	margin: 0 auto;
}

.coupon_item_value_limit{
	width: 30%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: red;
	font-size: 12px;
}

.coupon_item_value{
	font-size: 22px;
}

.coupon_item_limit{
	padding-top: 10rpx;
}

.coupon_item_info{
	width: 70%;
	font-size: 13px;
	padding: 10px 30rpx;
}

.coupon_item_info_use_btn_B{
	width: 130rpx;
	height: 60rpx;
	font-size: 13px;
	margin-left: 50rpx;
	background-color: #ff6d19;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	left: 10rpx;
}

.coupon_item_info_expire_use{
	padding-top: 10rpx;
	display: flex;
	flex-wrap: nowrap;
	min-width: max-content;
	align-items: center;
	// border: solid red 1px;
	justify-content: space-between;
}

.coupon_item_info_tip{
	padding-top: 10rpx;
}

.notFirstCouponItem{
	margin-top: 20rpx;
}

.tab_switch{
	display: flex;
	background-color: #fff;
	padding: 20rpx 0px;
	font-size: 15px;
}

.coupon_list{
	padding-top: 20rpx;
}

.tab_item{
	width: 50%;
	// border: solid red 1px;
	display: flex;
	justify-content: center;
	align-content: center;
}

.active_tab{
	font-weight: 600;
}

.used_coupons{
	font-size: 14px;
	color: #686868;
	margin-top: 15rpx;
	text-align: center;
}

.coupon_item_used{
	opacity: 0.5;
}

.coupon_item_info_use_btn_B_use{
	background-color: #fff;
	border: #ff6d19 solid 1px;
	color: #ff6d19;
	border-radius: 20rpx;
	padding: 5rpx;
}

.coupon_item_info_use{
	text-align: left;
}


</style>
